<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view v-else>
            <view class="detail">
                <view class="detail-header">
                    <!-- 					<iconsfont v-if="data.State == 0" customIcons="icon-shenhezhong" color="#ffffff" size="52" ></iconsfont>
					<iconsfont v-if="data.State == 8" customIcons="icon-bohui" color="#ffffff" size="52" ></iconsfont> -->
                    <text>{{ getBtnText() }}</text>
                </view>
                <view class="detail-item detail-price">
                    <view class="item-itle price">
                        <text class="label-text">退款金额</text>
                        <text class="value-text">¥{{ data.PriceSum }}</text>
                    </view>
                    <order-info-item label="商品金额" :value="'¥' + data.OrgPriceSum"></order-info-item>
                    <order-info-item label="审核金额" :value="'¥' + data.PriceSum"></order-info-item>
                </view>

                <view class="detail-item detail-info">
                    <view class="item-itle info">
                        <text class="label-text">申请信息</text>
                    </view>
                    <order-info-item label="退货单号" :value="data.En"></order-info-item>
                    <order-info-item label="退货时间" :value="data.AddTime"></order-info-item>
                    <order-relation
                        v-if="data.OrderSn.length > 0"
                        label="关联订单"
                        :value="data.OrderSn"></order-relation>
                </view>
                <view class="detail-item detail-list" @click="goGoodsList">
                    <view class="item-itle state">
                        <text class="label-text">商品清单</text>
                        <text class="value-text">{{ data.ClassNumber }}种{{ data.TotalNumber }}件</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="detail-item detail-list" v-if="data.State != 8 && data.State != 0 && data.State != 10">
                    <view class="item-itle state">
                        <text class="label-text">退货信息</text>
                    </view>
                    <view class="card-group">
                        <card-group-cell
                            label="快递公司"
                            @click.native="selExpress"
                            :isShowRight="false"
                            :isDefalut="true"
                            :value="type"></card-group-cell>
                        <card-group-cell
                            ref="odd"
                            label="快递单号"
                            placeholder="请输入快递单号"
                            :value="odd"
                            :isInputView="data.State == 1"
                            :isShowRight="false"></card-group-cell>
                        <card-group-cell
                            label="收件信息"
                            :value="address.ContactName + '　' + address.ContactTel"
                            :isDefalut="true"
                            :isShowRight="false"></card-group-cell>
                        <card-group-cell
                            label="退货地址"
                            :value="getAddressText(address)"
                            :isDefalut="true"
                            :isShowRight="false"></card-group-cell>
                    </view>
                </view>
                <view
                    class="detail-item detail-reason"
                    v-if="data.Remark || (data.ImageArray && data.ImageArray.length > 0)">
                    <view class="item-itle state">
                        <text class="label-text">退货原因</text>
                    </view>
                    <view class="reason-content">
                        <text v-if="data.Remark">{{ data.Remark }}</text>
                        <view class="reason-img-box" v-if="data.ImageArray && data.ImageArray.length > 0">
                            <image
                                class="reason-img"
                                v-for="(item, index) in data.ImageArray"
                                :src="easyGetImgUrl(item)"
                                @tap="previewImage(index)"></image>
                        </view>
                    </view>
                </view>
                <view class="detail-item detail-reason" v-if="Message && data.State == 8">
                    <view class="item-itle state">
                        <text class="label-text">驳回原因</text>
                    </view>
                    <view class="reason-content">
                        <text>{{ Message }}</text>
                    </view>
                </view>
            </view>
            <view class="bottom-bar" v-if="data.State == 0 || data.State == 8 || data.State == 1">
                <text class="btn btn-yellow-hollow" v-if="data.State == 0" @click="prompt">催单</text>
                <text class="btn btn-success-hollow" v-if="data.State == 0 || data.State == 8" @click="cancellation"
                    >退单作废</text
                >
                <text class="btn btn-success-hollow" v-if="data.State == 1" @click="submitExpressage">提交</text>
            </view>
        </view>
        <uni-popup type="bottom" ref="expressage" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择快递公司</text></view>
                <scroll-view scroll-y="true" class="pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in expressList" @click="select(item, index)">
                            <text>{{ item }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="cancel">取消</button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import orderInfoItem from "@/pages_shop/components/order/order-info-item.vue"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import orderRelation from "@/pages_shop/components/order/order-relation.vue"
import { GetReturnAddress } from "@/service/api/member.js"
import {
    GetRefundOrderExtInfo,
    CancelRefundOrder,
    GetExpressList,
    SaveRefundOrderAddress,
} from "@/service/api/exChange.js"
export default {
    components: {
        orderInfoItem,
        cardGroupCell,
        orderRelation,
    },
    data() {
        return {
            id: 0,
            type: "请选择快递公司",
            odd: "",
            data: {},
            isLoading: false,
            expressId: null,
            express: [],
            expressList: [],
            address: {},
            Message: "",
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.getDetail()
        this.getAddress()
    },
    methods: {
        ...mapMutations(["UP_RETURN_ORDER_VIEW"]),
        getAddressText(address) {
            let street = address.StreetName ? address.StreetName : ""
            let result = address.ProvinceName + address.CityName + address.AreaName + street + address.ContactAddress
            return result
        },
        getBtnText() {
            //获取订单状态对应按钮文字
            let btnText = ""
            switch (this.data.State) {
                case 0:
                    btnText = "退单审核中"
                    break
                case 1:
                    btnText = "待退货"
                    break
                case 2:
                    btnText = "已取消"
                    break
                case 3:
                    btnText = "退货中"
                    break
                case 7:
                    btnText = "已退货"
                    break
                case 8:
                    btnText = "已驳回"
                    break
                default:
                    btnText = "退单审核中"
                    break
            }
            return btnText
        },
        selExpress() {
            if (this.data.State == 1) {
                this.$refs.expressage.open()
            }
        },
        cancel() {
            this.$refs.expressage.close()
        },
        select(item, index) {
            this.type = item
            this.expressId = this.express[index].ID
            this.$refs.expressage.close()
        },
        prompt() {
            uni.showToast({
                title: "已通知商家尽快处理",
                icon: "none",
                duration: 2000,
            })
        },
        submitExpressage() {
            var that = this
            if (this.type == "请选择快递公司") {
                uni.showToast({
                    title: "请选择快递公司",
                    icon: "none",
                    duration: 2000,
                })
                return
            }
            if (this.$refs.odd.getValue() == "") {
                uni.showToast({
                    title: "请输入快递单号",
                    icon: "none",
                    duration: 2000,
                })
                return
            }
            let param = {
                addressId: this.address.ID,
                expressId: this.expressId,
                expressName: this.type,
                expressNo: this.$refs.odd.getValue(),
                id: this.id,
            }
            SaveRefundOrderAddress(param).then((res) => {
                if (res.State == 1) {
                    uni.showToast({
                        title: "提交成功",
                        icon: "none",
                        duration: 2000,
                    })
                    setTimeout(() => {
                        that.getDetail()
                    }, 2000)
                    that.upOrderView()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        goGoodsList() {
            this.easyGoTo("/pages_shop/packet/return/returnGoodsList?id=" + this.data.ID)
        },
        //获取详情
        getDetail() {
            let param = {
                id: this.id,
            }
            this.isLoading = true
            GetRefundOrderExtInfo(param).then((res) => {
                this.data = res.Data.Info
                if (res.Data.Address && res.Data.Address.ExpressNo) {
                    this.odd = res.Data.Address.ExpressNo
                }
                if (res.Data.Address && res.Data.Address.ExpressName) {
                    this.type = res.Data.Address.ExpressName
                }
                if (res.Data.CheckLog && res.Data.CheckLog.Message) {
                    this.Message = res.Data.CheckLog.Message
                }
                this.isLoading = false
                this.getExpList()
            })
        },
        getAddress() {
            GetReturnAddress().then((res) => {
                this.address = res.Data
            })
        },
        getExpList() {
            let param = {
                isRefund: true,
            }
            let path = "?isRefund=true"
            GetExpressList(param, path).then((res) => {
                this.express = res.Data
                res.Data.forEach((e) => {
                    this.expressList.push(e.Name)
                })
            })
        },
        //退单作废
        cancellation() {
            var that = this
            uni.showModal({
                title: "提示",
                content: "确定要作废此订单吗？",
                success: function (res) {
                    if (res.confirm) {
                        that._cancelOrder()
                    } else if (res.cancel) {
                        console.log("用户点击取消")
                    }
                },
            })
        },
        _cancelOrder() {
            var that = this
            CancelRefundOrder({ id: this.id }).then((res) => {
                if (res.State == 1) {
                    uni.showToast({
                        title: "作废成功",
                        icon: "none",
                        duration: 2000,
                    })
                    setTimeout(() => {
                        that.getDetail()
                    }, 2000)
                    that.upOrderView()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        upOrderView() {
            this.UP_RETURN_ORDER_VIEW(new Date().getTime())
        },
        //预览图片
        previewImage(index) {
            let that = this
            var current = index
            uni.previewImage({
                current: current,
                urls: that.easyImgList(that.data.ImageArray.join(",")),
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.bottom-bar {
    .btn {
        flex: 2;
        &:first-child {
            flex: 1;
            margin-left: 0;
        }
    }
}
.detail {
    .detail-item {
        background: $color-white;
        margin-bottom: 20rpx;
    }
    .detail-header {
        height: 100rpx;
        padding: $app-page-padding;
        background: $app-color-main;
        display: flex;
        align-items: center;
        text {
            font-weight: 500;
            font-size: $font-size-36;
            color: $color-white;
            margin-left: 10rpx;
        }
    }
    .item-itle {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-bottom: solid 1rpx $uni-bg-color-grey;
        margin-bottom: 10rpx;
        align-items: center;
        .label-text {
            font-weight: 700;
            display: flex;
            flex: 1;
            color: $color-black;
            font-size: $font-size-30;
        }
        .value-text {
            font-weight: 100;
            font-size: $font-size-28;
            color: $app-color-text-mian;
            color: #000000;
        }
    }
    .price {
        .label-text {
            color: $color-red;
        }
        .value-text {
            font-weight: 700;
            color: $color-red;
        }
    }
    .detail-reason {
        display: flex;
        flex-direction: column;
        .reason-content {
            margin: $app-page-padding;
            padding: $app-page-padding;
            background-color: $color-gray-5;
            text {
                font-size: $font-size-24;
            }
        }
        .reason-img {
            width: 120rpx;
            height: 120rpx;
            margin-right: 24rpx;
            border-radius: 4rpx;
        }
        .reason-img-box {
            margin-top: 24rpx;
            display: flex;
            flex-direction: row;
        }
    }
}
.pay-way-scroll {
    max-height: 50vh;
}
.order-info-item .label {
    font-size: $font-size-28;
}
</style>
